<template>
  <div class="map-page">
    <div id="map" class="map-page-main">
      <!-- <img
        src="../../../assets/home/map.png"
        alt=""
        style="width: 100%; height:100%;position:absolute"
      /> -->

    </div>
  </div>
</template>
<script>
import axios from "axios";

import { motorList } from "../../../api/home/map.js"
// import { motorList } from "../../../assets/icons/svg/404.svg"
export default {
  data() {
    return {
      map: "",
      cableUrl:
        "http://10.161.106.135:30002/geoesb/proxy/34d24614f4dc464d91d93379223ed7d4/a077be98933b4e77a6e3f0722e307f64",
      wellUrl:
        "http://10.161.106.135:30002/geoesb/proxy/7acbaea3037b4a56908f005ff5f32b60/a077be98933b4e77a6e3f0722e307f64",
      polylineGroup: "",
      rootLayerGroup: null, // 根图层
      layersObj: {}, // 存放markerLayer图层，便于图层切换
      num: 18,
      isSelectStreet: false,
      isSelectSite: false,
      isSelectOffice: false,
      officeTreeId: 45,
      siteTreeId: 41,
      selectStreetList: [],
      activeName: '1',
      addressList: [
        {
          name: '二龙路',
          x: '500794.247011',
          y: '305012.556423',
        }
      ]
    };
  },
  props: {
    minZoom: {
      type: Number,
      require: false,
      default: 2.5,
    },
    zoom: {
      type: Number,
      require: false,
      default: 3.0,
    },
    resourceName: {
      type: Array,
      require: true,
      default() {
        return [];
      },
    },
    smCode: {
      type: String,
      require: false,
      default: "",
    },
    type: {
      type: String,
      require: false,
      default: "",
    },
  },
  watch: {},
  methods: {
    // 设置相机位置，定位至模型
    setView() {
      let center = [305100.84640986566, 500768.9601252875];
      this.map.setView(center, 3.0);
      /** 关闭弹窗Popup */
      this.map.closePopup();
      if (this.polylineGroup) {
        this.map.removeLayer(this.polylineGroup);
      }
    },
    initMap() {
      var latlng = [
        { lat: 308118.556423, lng: 500794.247011 },
      ]
      let tileUrl =
        "http://10.161.106.135:30002/geoesb/proxy/services/maps/rest/f441fa2827c5486fa161ff5f3edd0f77/886e60bb7e014f22a707de23e6f6505d";
      // let tileUrl =
      //   "http://210.12.197.249:8092/geoesb/proxy/services/maps/rest/f9373c36bc3d4927a66f03f17b566db3/886e60bb7e014f22a707de23e6f6505d";
      let center = [305100.84640986566, 500768.9601252875];
      this.map = L.map("map", {
        center: center,
        zoom: this.zoom,
        minZoom: this.minZoom,
        zoomControl: false,
        zoomDelta: 0.9,
        zoomSnap: 0.95,
        attributionControl: false,
        crs: L.CRS.NonEarthCRS({
          origin: L.point([484574.4449160212, 318013.6711681044]),
          bounds: L.bounds(
            [484574.4449160212, 290458.1224712983],
            [516945.5263947935, 318013.6711681044]
          ),
        }),
      });

      L.supermap
        .tiledMapLayer(tileUrl, {
          layersID: "null",
        })
        .addTo(this.map);
      this.rootLayerGroup = L.featureGroup().addTo(this.map);
      var layers = [];
      for (let i = 0; i < latlng.length; i++) {
        var redIcon = L.icon({
          iconUrl: '../../../assets/icons/svg/404.svg',
          iconSize: [25, 41],
          iconAnchor: [13, 21]
        })
        var layer = new L.marker([latlng[i].lat, latlng[i].lng], {
          icon: redIcon
        });
        layers.push(layer)

      }
      var myGroup = L.layerGroup(layers)
      this.map.addLayer(myGroup);

    },
  },
  mounted() {
    const queryParams = {
      current: 1,
      size: 10,
    }
    motorList(queryParams)
    this.initMap();
  },
};
</script>
<style scoped lang="scss">
.map-page {

  width: 100%;
  display: flex;
  position: relative;
  height: 100%;
  // top: 90px;
  background-color: #cccccc;

  .aaa {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #cb1f1f;
    z-index: 10;
    // color: #000;
    left: 50%;
    top: 50%;
  }

  &-main {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    overflow: hidden;
    position: relative;
  }
}



::v-deep .info_box_item_title {
  height: 25px;
  line-height: 25px;
}

::v-deep .leaflet-popup-content {
  line-height: 40px;
}

::v-deep .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
  background-color: #091420;
}

::v-deep .leaflet-bottom {
  display: none;
}

::v-deep .leaflet-popup-content-wrapper {
  background: #0c3d66;
  color: #fff;
}
</style>
<style>
.div-icon {
  color: #e85657;
  margin-top: -10px;
  white-space: nowrap;
}
</style>
